<template>
    <!--答题记录-->
    <div class="contain">
        <h4 class="title"><span>答题记录</span></h4>
        <ul class="nav-box">
            <li class="nav"
                v-for="nav in testTypeList"
                :key="nav.name"
                :class="{active: test_type === nav.type}"
                @click="handleChangeNav(nav)"
            >
                {{nav.name}}
            </li>
        </ul>
        <ul class="course-box">
            <li class="course-page" v-for="page in pageList" :key="page.id">
                <div class="page">
                    <div class="page-intro">
                        <div class="page-name">{{page.test_name}}</div>
                        <div class="page-date">{{page.create_date | formatDateTime('yyyy年MM月dd日 hh:mm:ss')}}</div>
                    </div>
                    <div class="btn-box">
                        <a class="btn report" @click="handleJumpReport(page)" >查看报告</a>
                        <span class="msg-info">
                           共{{page.all_timu}}道题<!--，答对{{page.right_num}}道，统计得分{{page.fen_shu}}分-->
                        </span>
                    </div>
                </div>
            </li>
            <li class="no-data" v-if="pageList&&pageList.length ===0">暂无答题记录</li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'historyTestList',
    components: {
        /**/
    },
    data() {
        return {
            testTypeList: [
                /*{
                    name: '全部',
                    type: null
                },*/
                {
                    name: '章节试卷',
                    type: 1
                },
                {
                    name: '智能组卷',
                    type: 2
                },
                {
                    name: '历年真题试卷',
                    type: 3
                }
            ],
            activeType: null,
            pageList: null,
            test_type: 1
        };
    },
    props: {
        firstLab: Object,
        course: Object
    },
    watch: {
        subject() {
            /*this.init()*/
        },
        course() {
            this.getTestList();
        }
    },
    mounted() {
        this.getTestList();
    },
    methods: {
        // 历年试卷列表
        getTestList() {
            if(!this.course.id) return;
            return this.$api.ajaxData({
                pathName: 'doGetTestLogList',
                authorization: true,
                errorFunc: false,
                method: 'post',
                data: {
                    test_type: this.test_type || '',
                    course_id: this.course.id
                }
            }).then(res =>{
                this.pageList = res.obj;
            }).catch(()=> {
                this.pageList = [];
            });
        },
        handleChangeNav(nav) {
            this.test_type = nav.type;
            this.getTestList();
        },
        // 查看报告
        handleJumpReport(page) {
            let routeData = this.$router.resolve({
                name: 'analysis', query: {
                    test_id: page.test_id,
                    batch_id: page.batch_id
                }
            });
            window.open(routeData.href, '_blank');
        },
        // 未做完
        handleJumpTest(page) {
            let routeData = this.$router.resolve({
                name: 'test', query: {
                    type: page.test_type,
                    course_id: page.course_id,
                    sec_lab_name: page.sec_lab_name,
                    test_id: page.test_id,
                    batch_id: page.batch_id
                }
            });
            window.open(routeData.href, '_blank');
        }
    }
};
</script>
<style scoped lang="scss">
.contain {
    position: relative;
    background: #fff;
    border-radius: 2px;
    font-size: 13px;
    border: 1px solid #f7f7f7;
    .title {
        padding: 10px;
        line-height: 25px;
        span {
            display: block;
            padding-left: 25px;
            border-left: 4px solid rgba(118, 180, 217, 1);
            color: #333;
            font-weight: bold;
        }
    }
    .nav-box {
        padding: 15px 25px 1px;
        line-height: 24px;
        background: #f2f2f2;
        .nav {
            float: left;
            margin: 0 20px 14px 0;
            padding: 0 15px;
            border: 1px solid #666;
            border-radius: 13px;
            font-size: 12px;
            cursor: pointer;
            &.active {
                color: #007aff;
                border-color: #007aff;
            }
            &:hover {
                opacity: 0.8;
            }
        }
        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }
    .course-box {
        .course-page {
            border-bottom: 1px solid #f7f7f7;
            .page {
                display: flex;
                height: 50px;
                padding: 0 20px;
                align-items: center;
                justify-content: space-between;
                .page-intro {
                    flex: 1;
                    .page-name {
                        margin-bottom: 5px;
                        font-size: 15px;
                        color: #333;
                    }
                    .page-date {
                        font-size: 13px;
                        color: #999;
                    }
                }
                .btn-box {
                    .btn {
                        font-size: 11px;
                    }
                    .report {
                        padding: 0 10px;
                        margin-right: 15px;
                        line-height: 20px;
                        border-radius: 10px;
                        color: #0079FE;
                        background: #c2e1ff;
                    }
                    .warning {
                        padding: 0 10px;
                        margin-right: 15px;
                        line-height: 20px;
                        border-radius: 10px;
                        color: #FF9900;
                        background: #ffe1b3;
                    }
                    .msg-info {
                        color: #0079FE;
                    }
                }
            }
            &:last-child {
                border: none;
            }
        }
        .no-data {
            color: #999;
            text-align: center;
        }
    }

}
</style>
